<template>
  <div class="wrap">
    <div class="billTitle" @click="show=true">
      <em>全部账单</em>
      <img src="@/assets/whiteArrows.png" alt="" class="arrows" />
    </div>
    <div class="bottomListWrap">
      <div v-if="resCashRecordList.length > 0">
        <div
          class="item"
          v-for="(item, index) in resCashRecordList"
          :key="index"
        >
          <div class="topWrap">
            <p class="textExplain">
              {{
                item.type == 0
                  ? "购买商品"
                  : item.type == 1
                  ? "余额充值"
                  : item.type == 2
                  ? "租金续租"
                  : item.type == 3
                  ? "购买推广"
                  : ""
              }}
            </p>
            <div class="rightText">
              <em>-￥{{ item.transPrice }}</em>
            </div>
          </div>
          <div class="time">
            <div class="timeLeft">
              {{ item.createTime }}
            </div>
            <div class="timeRight">余额:￥{{ item.balancePrice }}</div>
          </div>
        </div>
      </div>
      <div v-else>暂无记录</div>
    </div>
    <div class="popupWrap">
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="选择店铺类型"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Field,Popup,Picker } from "vant";
import { apiBillRecordList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      show: false,
      columns: [
        '全部账单',
        '购买商品',
        '余额充值',
        '租金续租',
        '购买推广'
      ], //账单类型
      chooseKindsId:'',//选择的分类id
      showKinds:'',//选择的分类名称
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resCashRecordList: [], //账单列表
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getCashRecordList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getCashRecordList();
      }
    },
    //选择账单类型：
    onConfirm(value, index) {
      this.show = false;
      this.showKinds = value
      this.chooseKindsId= index;
      this.reqPageNum=0
      this.noMore=false,
      this.resCashRecordList=[]
      this.getCashRecordList()
    },
    onCancel() {},
    onChange() {},
    //查询账单列表:
    getCashRecordList() {
      var page = (this.reqPageNum += 1);
     var reqChooseKindsId = this.chooseKindsId-1
      apiBillRecordList({
        pageNum: page,
        pageSize: this.reqpageSize,
        type: reqChooseKindsId==-1?'':reqChooseKindsId
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resCashRecordList = [...this.resCashRecordList, ...dataRes];
        console.log("resCashRecordList-账单", this.resCashRecordList);
      });
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
};
</script>

<style scoped>
.bottomListWrap {
  width: calc(95% - 40px);
  margin: 10px auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  padding-bottom: 5px;
}
.item {
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 25px;
  /* border-bottom: 1px solid #EEEEEE; */
}
.textExplain {
  float: left;
}
.rightText {
  float: right;
}
.topWrap {
  overflow: hidden;
  margin-bottom: 10px;
}
.time {
  overflow: hidden;
}

.timeLeft {
  float: left;
  font-size: 10px;
  color: #999999;
}
.timeRight {
  float: right;
  font-size: 10px;
  color: #000;
}
.billTitle {
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  height: 37px;
  width: 135px;
  text-align: center;
  line-height: 37px;
  background: #181818;
  border-radius: 19px;
  margin-top: 12px;
  margin-left: 2.5%;
}
.arrows {
  width: 5px;
  height: 9px;
  padding-left: 3px;
}
</style>
